<template>
  <div class="item">
    <img :src="apple" alt v-if="appleCoordinate[0]===x&&appleCoordinate[1]===y">
    <div :class="['snake',isSnakeHeader?'header':'']" v-if="isSnake"></div>
    <div v-if="isHinder" class="hinder"></div>
  </div>
</template>

<script>
import apple from "../assets/apple.png";
export default {
  props: ["x", "y", "snake", "appleCoordinate", "hinder"],
  methods: {},
  computed: {
    isSnake() {
      return this.snake.some(item => item[0] === this.x && item[1] === this.y);
    },
    isSnakeHeader() {
      return this.snake[0][0] === this.x && this.snake[0][1] === this.y;
    },
    isHinder() {
      return this.hinder.some(item => item[0] === this.x && item[1] === this.y);
    }
  },
  data() {
    return {
      apple
    };
  }
};
</script>

<style scoped>
.item {
  position: relative;
}
div {
  width: 20px;
  height: 20px;
}
.snake {
  background: rgb(116, 116, 116);
  border: 1px solid #cccccc;
}
.header {
  background: rgb(54, 54, 54);
  border-radius: 10px;
  margin-left: 1px;
}
img {
  width: 20px;
  height: 20px;
}
.hinder {
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(255, 0, 0);
}
</style>

